模板引擎 artTemplate 介绍和简单封装

artTemplate

 2015/07/22

模版引擎

artTemplate 简洁语法模板

下载(https://raw.github.com/aui/artTemplate/master/dist/template.js)
引入
编写模版

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染数据

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

简洁语法

{{if admin}}
    {{include 'admin_content'}}
    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

artTemplate 原生 js 模板语法

下载(https://raw.github.com/aui/artTemplate/master/dist/template-native.js)
引入
表达式
<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
输出表达式
对内容编码输出：
<%=content%>
不编码输出：
<%=#content%>
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

支持使用 js 原生语法

<h1><%=title%></h1>
<ul>  
    <%for(i = 0; i < list.length; i ++) {%>      
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>

模拟封装 artTemplate

artTemplate 原生语法封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script type="text/myTemplate" id="myTemplate">
    <p><%=name1%><%=name2%><%=name3%></p>
</script>
<script>
    //模拟一个从服务器端响应回来的数据  
    var data = {
        haha: "哈哈",
        hehe: "呵呵",
        heihei: '嘿嘿'
    };
    var div = document.querySelector('div');
    //在template第一个参数代表的是模板ID ，第二个参数代表的是数据
    function mytemplate(templateid, data) {
        //拿到模板
        var templateTpl = document.querySelector('#' + templateid);
        //拿到模板内容
        var strTpl = templateTpl.innerHTML;
        //利用正则验证模板是否匹配
        var reg = /<%=\s*([^%>]+\S)\s*%>/;
        /**
         reg.exec() 方法
         功能:用正则调用,通过该方法查找匹配的内容
         参数:字符串
         返回值: 返回结果数组,找不到就会返回null
         */
         //拿到匹配项
        var result = reg.exec(strTpl);
        //当模板中有匹配项存在时，循环执行替换，不存在则中断
        while (result = reg.exec(strTpl)) {
            //拿到匹配项的模板字符串
            var resultstr = result[0];//<%=name%>
            //拿到匹配项需要修改的目标
            var resultWord = result[1];//name
            //用数据替换掉该处模板
            strTpl = strTpl.replace(resultstr, data[resultWord]);
        }
        //返回结果
        return strTpl;
    };
    //将其写入到网页中
    div.innerHTML = mytemplate('myTemplate', data);
</script>
</body>
</html>

artTemplate 简洁语法封装

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div></div>
<script id="myTemplate" type="text/myTemplate">
    <p>{{haha}}</p>
    <p>{{hehe}}</p>
</script>
<script>
    //模拟一个从服务器端响应回来的数据
    var data =
    {
        "haha":"哈哈",
        "hehe":"呵呵"
    };
    var div = document.querySelector('div');
    function myTemplate(templateid,data) {
        //拿到模板内容
        var strTpl = document.querySelector("#" + templateid).innerHTML;
        //利用正则验证模板是否匹配
        var reg = /{{(\w+)}}/;
        /**
         reg.exec() 方法
         功能:用正则调用,通过该方法查找匹配的内容
         参数:字符串
         返回值: 返回结果数组,找不到就会返回null
         */
        var result = null;
        //当模板中有匹配项存在时，循环执行替换，不存在则中断
        while (result = reg.exec(strTpl)){
            strTpl = strTpl.replace(result[0],data[result[1]]);
        }
        //返回结果
        return strTpl;
    }
    //将其写入到网页中
    div.innerHTML = myTemplate("myTemplate",data);
</script>
</body>
</html>

CATALOG

1. 模版引擎
1. 1.1. artTemplate 简洁语法模板
2. 1.2. artTemplate 原生 js 模板语法
2. 模拟封装 artTemplate
1. 2.1. artTemplate 原生语法封装
2. 2.2. artTemplate 简洁语法封装



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

模板引擎 artTemplate 介绍 和 简单封装